<template>
    <div class="main">
        <h2>声明式响应式状态</h2>

        <div class="group">
            <h3>ref() 函数</h3>
            <div class="content">
                <p>numC:{{ numC }}</p>
                <p>dataNumC:{{ dataNumC }}</p>
                <p>{{ dataBool ? dataStr : '阿里巴巴' }}</p>
                <p>
                    <button type="button" @click="accNum">累加</button>
                    <button type="button" @click="accNumC">普通变量累加</button>
                    <button type="button" @click="accDataNumC">响应式变量累加</button>
                </p>
            </div>
        </div>


        <div class="group">
            <h3 @click="editAllRefData">ref()函数 - 深层响应性</h3>
            <div class="content">
                <p @click="accDataobjCount">dataObj1.count:{{ dataObj1.count }}</p>
                <p @click="pushDataObjStrArr">
                <ul>
                    <li v-for="(item, index) in dataObj1.strArr" :key="index">{{ item }}</li>
                </ul>
                </p>

                <hr>

                <p @click="editSex">
                    username:{{ dataObj1.user.name }}
                    sex:{{ dataObj1.user.sex }}

                <ul>
                    <li v-for="(key, value, index) in dataObj1.user" :key="index">key:{{ key }},value:{{ value }}</li>
                </ul>
                </p>
            </div>
        </div>

        <div class="group">
            <h3 @click="editAllReactiveData">reactive() 函数:将使对象本身具有响应性</h3>
            <div class="content">
                <p @click="accDataobjCount2">dataObj2.count: {{ dataObj2.count }}</p>
                <p @click="pushDataObjStrArr2">
                <ul>
                    <li v-for="(item, index) in dataObj2.strArr" :key="index">{{ item }}</li>
                </ul>
                </p>
                <hr>
                <p @click="editSex2">
                    Username:{{ dataObj2.user.name }}
                    sex:{{ dataObj2.user.sex }}

                <ul>
                    <li v-for="(item, key, index) in dataObj2.user" :key="index"> key:{{ key }} - value:{{ item }}</li>
                </ul>

                </p>
            </div>
        </div>


    </div>
</template>


<script lang="ts">
export default {
    name: 'diyDemo31'
}
</script>

<script setup lang="ts">
import { reactive, ref, type Ref } from 'vue'

// 一层 ref
let numC = 0
let dataNumC: Ref<number> = ref(0)
let dataStr = ref<string>('鸿蒙开发')
let dataBool = ref<boolean>(true)


interface Iuser {
    name: string
    sex: string
    age: number
}

interface IdataObj1<T> {
    count: number
    strArr: string[]
    user: T
}

// 深层响应性 ref
let dataObj1 = ref<IdataObj1<Iuser>>({
    count: 0,
    strArr: ['php', '刘强东', '马云', '马化腾', '任正非'],
    user: {
        name: '许家印',
        sex: 'nan',
        age: 42
    }
})





// 替换ref根级别的值
const editAllRefData = () => {
    dataObj1.value = {
        count: 100,
        strArr: ['java', '刘强东', '马云', '马化腾', '任正非'],
        user: {
            name: '周志超',
            sex: 'nv',
            age: 11
        }
    }
}

// reactive
let dataObj2: IdataObj1<Iuser> = reactive({
    count: 0,
    strArr: ['php', '刘强东', '马云', '马化腾', '任正非'],
    user: {
        name: '许家印',
        sex: 'nan',
        age: 42
    }
})



// 因为ref 的引用值是用 reactive 包裹的，所以ref具有深层响应性
// ref的value对应的是一个 reactive 包裹的响应式对象
console.log(dataObj1.value, '#dataObj1.value');

console.log(dataObj2, '#dataObj2');


// 替换 reactive 根级别的值
const editAllReactiveData = () => {

    dataObj2 = {
        count: 100,
        strArr: ['java', '刘强东', '马云', '马化腾', '任正非'],
        user: {
            name: '周志超',
            sex: 'nv',
            age: 11
        }
    }

    console.log(dataObj2, 'dataObj2');


}


const accDataobjCount2 = () => {
    // 不需要使用 .value ,因为本身具有响应性
    dataObj2.count++

}
const pushDataObjStrArr2 = () => {
    dataObj2.strArr.push('万梓良')
}

const editSex2 = () => {
    dataObj2.user.sex = '女'
}



const accDataobjCount = () => {
    dataObj1.value.count++
}

const pushDataObjStrArr = () => {
    dataObj1.value.strArr.push('张柏芝')
}

const editSex = () => {
    dataObj1.value.user.sex = '女'
}

// 普通变量的累加
const accNumC = () => {
    numC++
    console.log(numC, 'numC')
}

// 响应式变量累加
const accDataNumC = () => {
    dataNumC.value++
    console.log(dataNumC.value, ' dataNumC.value')
}

const accNum = () => {
    // 响应式的原理：只要有状态变量改变，程序都最后就会触发UI的渲染，非状态变量也会别感染
    dataNumC.value++
    numC++

    console.log(numC, 'numC')
    console.log(dataNumC.value, ' dataNumC.value')
}
</script>

<style lang="scss" scoped>
@import '@/assets/groupDemo.scss';

.active {
    color: darkorange;
}

.text-danger {
    background-color: red;
}

.text-success {
    background-color: green;
}

.active-new {
    font-size: 22px;
}
</style>
